Search CustomTheme

The Search CustomTheme object contains settings to customize the content theme (added as a separate property) for embedded search. The custom theme can cover an entire set of theme settings, or override a selection of settings. The custom theme override property of searchEmbedOptions takes the customTheme object to dynamically inject the changes into the current visual.

The Search CustomTheme operates in an identical fashion to the embedded content CustomTheme object.

Using the Search CustomTheme Object

Constructors

  • There is NO constructor for the Search CustomTheme object
  • Search CustomTheme is made up of a collection of hierarchical properties (key-value pairs)

You do NOT need to supply the entire object - as settings will be adjusted for those properties supplied only.

To get a better sense of all the theme settings and options, see the theme editor in the admin.

Content Theme Object Groups

  • general – global font styles and icons
  • grid – context menu style and icons
  • visuals – smart insights dialog style
  • slicers – presentation specific styles, like the side menu

Nested Structure

The following code shows the ENTIRE Search CustomTheme structure with every property that can be set.

ClosedObject Structure 
{
  "General": {
    "generalColor1": {
      "color": ""
    },
    "generalColor2": {
      "color": ""
    },
    "generalColor3": {
      "color": ""
    },
    "generalColor4": {
      "color": ""
    },
    "generalColor5": {
      "color": ""
    },
    "generalColor6": {
      "color": ""
    },
    "generalColor7": {
      "color": ""
    },
    "generalColor8": {
      "color": ""
    },
    "generalColor9": {
      "color": ""
    },
    "generalColor1": {
      "color": ""
    },
    "generalColor11": {
      "color": ""
    },
    "generalColor12": {
      "color": ""
    },
    "generalColor13": {
      "color": ""
    },
    "generalColor14": {
      "color": ""
    },
    "generalColor15": {
      "color": ""
    },
    "generalColor16": {
      "color": ""
    },
    "generalLinesColor": {
      "color": ""
    }
  },
  "Grid": {
    "gridGeneral": {
      "color": "",
      "font-weight": "",
      "background": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "gridColumnHeader": {
      "padding": ,
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": "",
      "verticalPadding": 
    },
    "gridMatrixBorder": {
      "stroke-width": ,
      "stroke": ""
    },
    "gridMatrixColumns": {
      "padding": ,
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": "",
      "verticalPadding": 
    },
    "gridMatrixDataCell": {
      "color": ""
    },
    "gridTabularDataCell": {
      "color": "",
      "altFill": ""
    },
    "gridMatrixRows": {
      "padding": ,
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": "",
      "verticalPadding": 
    },
    "gridColorMappingRows": {
      "colorMapping": 
    },
    "gridMatrixDataText": {
      "padding": ,
      "color": "",
      "font-weight": "",
      "text-anchor": "",
      "font-size": "",
      "font-family": "",
      "font-style": "",
      "verticalPadding": 
    },
    "gridColorMappingColumns": {
      "colorMapping": 
    },
    "gridTabularTotalsDataCell": {
      "color": ""
    },
    "gridRowHeader": {
      "padding": ,
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": "",
      "verticalPadding": 
    }
  },
  "Visuals": {
    "visualsYAxisTitle": {
      "color": "",
      "font-weight": "",
      "text-anchor": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualYGridLines": {
      "stroke-width": ,
      "stroke": ""
    },
    "visualsYTrellisAxis": {
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualsYTrellisAxisDomain": {
      "stroke-width": ,
      "stroke": ""
    },
    "visualsPlotArea": {
      "color": "",
      "stroke-width": ,
      "stroke": ""
    },
    "visualsCartesianStyle": {
      "opacity": 
    },
    "visualsDataLabels": {
      "color": "",
      "font-weight": "",
      "background": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualsYAxisDomain": {
      "stroke-width": ,
      "stroke": ""
    },
    "visualRangeColors": {
      "endFill": "",
      "actualValue": "",
      "targetValue": "",
      "startFill": "",
      "middleFill": ""
    },
    "visualsXAxis": {
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualXGridLines": {
      "stroke-width": ,
      "stroke": ""
    },
    "visualsLegendBorder": {
      "color": "",
      "stroke-width": ,
      "stroke": ""
    },
    "visualQuadBandRangeColors": {
      "color1": "",
      "color2": "",
      "color3": "",
      "color4": ""
    },
    "visualsGeneral": {
      "color": "",
      "font-weight": "",
      "background": "",
      "font-size": "",
      "font-family": "",
      "font-style": "",
      "radius": 
    },
    "visualDualBandRangeColors": {
      "color1": "",
      "color2": ""
    },
    "visualsXAxisDomain": {
      "stroke-width": ,
      "stroke": ""
    },
    "visualsDataPoints": {
      "stroke-width": 
    },
    "reportTitle": {
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualsYAxis": {
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualsLegendTitle": {
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualsXTrellisAxis": {
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualsXTrellisAxisDomain": {
      "stroke": ""
    },
    "visualsLegend": {
      "color": "",
      "font-weight": "",
      "legend-position": ,
      "font-size": "",
      "font-family": "",
      "font-style": "",
      "radius": 
    },
    "visualsXAxisTitle": {
      "color": "",
      "font-weight": "",
      "text-anchor": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualsMultiChartTitle": {
      "color": "",
      "font-weight": "",
      "text-anchor": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "visualPentBandRangeColors": {
      "color1": "",
      "color2": "",
      "color5": "",
      "color3": "",
      "color4": ""
    }
  },
  "Slicers": {
    "slicerGeneral": {
      "slicerViewMode": 
    },
    "slicerBorder": {
      "border-color": "",
      "border-width": ,
      "radius": 
    },
    "slicerTitle": {
      "color": "",
      "font-weight": "",
      "font-size": "",
      "font-family": "",
      "font-style": ""
    },
    "slicerContentSelected": {
      "color": "",
      "font-weight": "",
      "background": "",
      "font-style": ""
    },
    "slicerContentNotSelected": {
      "color": "",
      "font-weight": "",
      "background": "",
      "font-style": ""
    },
    "slicerContentHighlight": {
      "color": "",
      "font-weight": "",
      "background": "",
      "font-style": ""
    },
    "slicerContent": {
      "font-size": "",
      "font-family": ""
    }
  }
};

Setting Properties

The following shows how to set some of the properties. In general, they follow standard CSS rules and standard CSS settings.

To see specific examples for each property, see examples below.

Fonts

Set fonts using standard CSS font settings

"font": "Roboto, sans-serif"

"font-size": "12px"

Colors

Set colors using standard CSS HEX numbers, RGB or more complex background fills like gradients

"color": "#f0f0f0"

"color": hsla(30, 100%, 50%. 0.6)

"color": rgba(34, 12, 64, 0.6)

Examples

See the embedded content CustomTheme object examples for examples on using the Search CustomTheme